<template>
	<div id="">
		<div class="yudingguanli">预定管理</div>
		<div class="bottom">
			<div id="ccc" style="width: 100%; height: 50px;">
				<div class="message">
					<div class="cc" style="background-color: #87CEFA;"></div>
					<div class="cz">
						空闲
					</div>
					<div class="cc" style="background-color:#CD5C5C"></div>
					<div class="cz">
						入住
					</div>
					<div class="cc" style="background-color:lightslategray"></div>
					<div class="cz">
						预定
					</div>
				</div>
				
				<div class="addh" style="width: 50px; height: 50px; float: left; margin-left: 1000px; margin-top: 5px;">
					<el-button type="success" icon="el-icon-plus"  @click="dialogFormVisible = true">添加房间</el-button>
					<el-dialog title="添加房间" :visible.sync="dialogFormVisible">
						<el-form :model="form" style="width: 400px; margin-left: calc(50% - 200px);">
							<el-form-item label="房间编号" :label-width="formLabelWidth">
								<el-input v-model="form.hid" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="房间类型" :label-width="formLabelWidth">
								<el-select v-model="form.htypeid" placeholder="请选择房间类型">
									<el-option label="区域一" value="shanghai"></el-option>
									<el-option label="区域二" value="beijing"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
						</div>
					</el-dialog>
				</div>
				<div id="addht" style="width: 50px; height: 50px; float: left; margin-left: 100px; margin-top: 5px;">
					<el-button type="success" icon="el-icon-plus"  @click="dialogFormVisible1 = true">添加房型</el-button>
					<el-dialog title="添加房型" :visible.sync="dialogFormVisible1">
						<el-form :model="form1" style="width: 400px; margin-left: calc(50% - 200px);">
							<el-form-item label="房间类型编号" :label-width="formLabelWidth1">
								<el-input v-model="form1.htypeidid" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="房间类型名称" :label-width="formLabelWidth1">
								<el-input v-model="form1.htypename" autocomplete="off"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
						</div>
					</el-dialog>
				</div>
			</div>
			<div id="H" style="width: 90%; height: 830px; margin-top: 10px;float: right; overflow: auto;">
				
				<!--<div :class="{'house0':status[index]==0, 'house1':status[index]==1,'house2': status[index]==2}" v-for="(h,index) in house">
					<div class="housez">
						{{hid}}
					</div>
					<div class="housez">
						{{htypename}}
					</div>
					<div id="kkk" style="width: 100%; height: 5px;"></div>
					<div class="housez">
						<div id="hbut" style="width: 50px; height: 100%; float: left; margin-left: 25px;">
							<el-button>预定</el-button>
						</div>
						<div id="hbut" style="width: 50px; height: 100%; float: left; margin-left: 25px;">
							<el-button>房型</el-button>
						</div>
					</div>
					<div class="housez" style="margin-top: 20px;">
						<el-button type="primary">入住/退房</el-button>
					</div>
				</div>-->
				
				<div class="house0">
					<div class="housez">
						房间号
					</div>
					<div class="housez">
						房间类型
					</div>
					<div id="kkk" style="width: 100%; height: 5px;"></div>
					<div class="housez">
						<div id="hbut" style="width: 50px; height: 100%; float: left; margin-left: 25px;">
							<el-button>预定</el-button>
						</div>
						<div id="hbut" style="width: 50px; height: 100%; float: left; margin-left: 25px;">
							<el-button>房型</el-button>
						</div>
					</div>
					<div class="housez" style="margin-top: 20px;">
						<el-button type="primary">入住/退房</el-button>
					</div>
				</div>
				<div class="house1">
					<div class="housez">
						房间号
					</div>
					<div class="housez">
						房间类型
					</div>
					<div id="kkk" style="width: 100%; height: 5px;"></div>
					<div class="housez">
						<div id="hbut" style="width: 50px; height: 100%; float: left; margin-left: 25px;">
							<el-button>预定</el-button>
						</div>
						<div id="hbut" style="width: 50px; height: 100%; float: left; margin-left: 25px;">
							<el-button>房型</el-button>
						</div>
					</div>
					<div class="housez" style="margin-top: 20px;">
						<el-button type="primary">入住/退房</el-button>
					</div>
				</div>
				<div class="house2">
					<div class="housez">
						房间号
					</div>
					<div class="housez">
						房间类型
					</div>
					<div id="kkk" style="width: 100%; height: 5px;"></div>
					<div class="housez">
						<div id="hbut" style="width: 50px; height: 100%; float: left; margin-left: 25px;">
							<el-button>预定</el-button>
						</div>
						<div id="hbut" style="width: 50px; height: 100%; float: left; margin-left: 25px;">
							<el-button>房型</el-button>
						</div>
					</div>
					<div class="housez" style="margin-top: 20px;">
						<el-button type="primary">入住/退房</el-button>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				dialogFormVisible: false,
				dialogFormVisible1: false,
				form: {
					hid: '',
					htypeid: '',
					formLabelWidth: '100px',
				},
				form1:{
					htypeid:'',
					htypename:'',
					formLabelWidth1: '100px',
				}
			}
		}
	}
</script>

<style>
	.yudingguanli {
		width: 100%;
		height: 60px;
		background-color: black;
		color: white;
		margin: 0px auto;
		text-align: center;
		font-family: "楷体";
		font-size: 50px;
	}
	
	.bottom {
		width: 100%;
		height: 890px;
		background-color: #D3D3D3;
	}
	
	.message {
		width: 400px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		margin-left: 50px;
		float: left;
		//background-color: #475669;
	}
	
	.cc {
		width: 20px;
		height: 20px;
		border: solid black;
		float: left;
		margin-top: 15px;
		margin-left: 10px;
	}
	
	.cz {
		width: 50px;
		height: 50px;
		float: left;
		margin-left: 5px;
		margin-top: 3px;
	}
	
	.house0 {
		width: 200px;
		height: 200px;
		border-radius: 20px;
		background-color: #87CEFA;
		margin-left: 50px;
		margin-top: 50px;
		float: left;
	}
	
	.house1 {
		width: 200px;
		height: 200px;
		border-radius: 20px;
		background-color: #CD5C5C;
		margin-left: 50px;
		margin-top: 50px;
		float: left;
	}
	
	.house2 {
		width: 200px;
		height: 200px;
		border-radius: 20px;
		background-color: lightslategray;
		margin-left: 50px;
		margin-top: 50px;
		float: left;
	}
	
	.housez {
		width: 100%;
		height: 30px;
		margin-top: 10px;
		line-height: 30px;
		text-align: center;
		//background-color: #CD5C5C;
	}
</style>